<template>
	<view class="details">
		<view class="wanl-refund">
			<view class="header">
				<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" mode="aspectFill" class="img-bg"></image>
				<view class="content">
					<view>
						<view class="status-text">{{getStateText(refundData.state)}}</view>
						<view class="reason">
							<text class="reason-text">{{refundData.statetime}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj" v-if="refundData.state != 4">
				{{getStateInfo(refundData.state)}}
			</view>
			<!-- 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交退货 -->
			<view class="bg-white solid-top  current" v-if="refundData.state == 0">
				<view class="wanl-gray text-sm">
					<view>
						<text class="iconfont  icon-dian"></text>卖家同意或超时未处理，系统将自动确认
					</view>
					<view class="margin-top-xs">
						<text class="iconfont icon-dian"></text>如果退款被拒绝，您可以修改申请重新发起
					</view>
				</view>
				<view class="flex justify-end margin-top">
					<view class="cu-btn line-black margin-lr-xs" @tap="closeRefund(refundData.id)">关闭退款</view>
					<view class="cu-btn line-orange" @tap="editRefund(refundData.id)">修改申请</view>
				</view>
			</view>
			
			<view class="addressee" v-if="refundData.state == 1">
				<view class="addressee_item">
					<view class="content">
						<view class="flex justify-between">
							<text>收件人：{{refundData.shopConfig.returnName}}</text><text>{{refundData.shopConfig.returnPhoneNum}}</text>
						</view>
						<view class="margin-top-xs">
							<view class="text-cut-2">
								{{refundData.shopConfig.returnAddr}}
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white padding-bj solid-top">
					<view class="wanl-gray text-sm">
						<view>
							<text class="iconfont icon-dian"></text>请勿使用平邮或到付，以免商家无法收到退货
						</view>
						<view class="margin-top-xs">
							<text class="iconfont icon-dian"></text>请填写真实快递信息，如超时则关闭退款
						</view>
					</view>
				</view>
				<view class="cu-form-group margin-top-bj">
					<view class="title">快递单号：</view>
					<input class="input" placeholder="请填写快递单号" name="input" v-model="returnData.express_no"></input>
				</view>
				<view class="cu-form-group cu-form-group1">
					<view class="title">快递公司：</view>
					<picker @change="kuaidiChange" :range="refundData.kuaidi" range-key="name">
						<view class="picker">
							{{kuaidiKey>-1?refundData.kuaidi[kuaidiKey].name:'请选择'}}
							<text class="iconfont icon-jiantou"></text>
						</view>
					</picker>
				</view>
				<view class="bg-white current1">
					<view class="justify-end1">
						<view class="cu-btn1" @tap="toExpress(refundData.id)">确认退货</view>
					</view>
				</view>
			</view>
			
			<view class="bg-white current wuliu"  v-if="refundData.state == 6">
				<view class="bg-white solid-top padding-bj">
					退货物流：<text class="wanl-gray">{{refundData.express_name}}({{refundData.express_no}})</text>
				</view>
				<view class="bg-white solid-top padding-bj current">
					<view class="wanl-gray text-sm">
						<view>
							<text class="iconfont icon-dian"></text>如果退款被拒绝，您可以修改申请重新发起
						</view>
						<view class="margin-top-xs">
							<text class="iconfont icon-dian"></text>卖家超时未处理，系统将自动确认
						</view>
					</view>
				</view>
			</view>
		
			<view class="bg-white current " v-if="refundData.state == 2">
				<view class="text-sm">
					拒绝理由：<text class="wanl-gray" v-if="refundData.refuse_content!=null">{{refundData.refuse_content}}</text>
				</view>
				<view class="justify-end margin-top">
					<!-- <view class="cu-btn line-black" @tap="arbitrationRefund(refundData.id)">平台介入</view> -->
					<view class="cu-btn line-orange margin-left-xs" @tap="editRefund(refundData.id)">修改申请</view>
				</view>
			</view>
			
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 3">
				<view class="wanl-gray text-sm">
					<view>
						<text class="iconfont icon-dian"></text>客服正在审核退款详情及退款历史记录
					</view>
					<view class="margin-top-xs">
						<text class="iconfont icon-dian"></text>大概1-3个工作日做出答复，请耐心等待
					</view>
				</view>
			</view>
			
			<view class="bg-white price " v-if="refundData.state == 4">
				<text>退款总金额</text><text class="text-price wanl-orange">{{refundData.price}}</text>
			</view>
			<!-- 退款历史 -->
			<view class="bg-white tuikuan" @tap="refundLog(refundData.id)">
				<text>退款历史</text><text class="iconfont icon-jiantou"></text>
			</view>
			<view class="bg-white tuikuan">
				退款详情
			</view>
			<view class="padding-bj flex">
				<view class="cu-avatar xl margin-right-bj">
					<image :src="$wanlshop.oss(refundData.goods.image, 70, 70)" mode=""></image>
				</view>
				<view class="text-sm" style="width: calc(100% - 128rpx);">
					<view class="margin-bottom-xs">
						<view class="text-cut-2">
							{{refundData.goods.title}}
						</view>
					</view>
					<view class="wanl-gray">
						规格：{{refundData.goods.difference}}
					</view>
				</view>
			</view>
			<view class="bg-white leixing">
				<view class="item flex">
					<text class="wanl-gray"> 退款类型： </text> <text> {{refundData.type_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款原因： </text> <text> {{refundData.reason_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款金额： </text> <text class="text-price"> ￥{{refundData.price}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 物流状态： </text> <text> {{refundData.expressType_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款时间： </text> <text> {{refundData.createtime_text}} </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refundData: {
					statetime: '',
					goods: {

					}
				},
				returnData: {
					id: 0,
					express_no: '',
					express_name: ''
				},
				kuaidiKey: -1
			};
		},
		methods: {
			async loadData(data) {
				this.$api.get({
					url: '/wanlshop/refund/getRefundInfo',
					data: data,
					success: res => {
						this.refundData = res;
						this.returnData.id = res.id;
						// 时间差的毫秒数 
						if (res.state == 0) {
							var diff = (res.createtime + res.config.autoagree * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = '还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = '还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分';
							}
						} else if (res.state == 1) {
							var diff = (res.agreetime + res.config.returntime * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = '还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = '还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分';
							}
						} else if (res.state == 2) {
							this.refundData.statetime = res.rejecttime_text;
						} else if (res.state == 6) {
							var diff = (res.returntime + res.config.receivingtime * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = '还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = '还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分';
							}
						} else if (res.state == 3) {
							this.refundData.statetime = '等待平台处理';
						} else if (res.state == 4) {
							this.refundData.statetime = res.completetime_text;
						} else if (res.state == 5) {
							this.refundData.statetime = res.closingtime_text;
						}
					}
				});
			},
			getStateText(state) {
				return ["等待卖家同意", "等待买家退货", "卖家拒绝退款", "平台介入", "退款完成", "退款关闭", "等待卖家收取退货"][state];
			},
			getStateInfo(state) {
				return ["您已成功发起退款，等待卖家同意", "您发起的退款卖家已同意，请退货", "您可以修改退货申请再次发起", "您已申请平台介入，请等待平台对此判定", "退款完成", "您已关闭本次退款申请",
					"如果商家确认收到货物，并核查没有问题，将退款给您"
				][state];
			},
			kuaidiChange(e) {
				this.kuaidiKey = e.detail.value;
				this.returnData.express_name = this.refundData.kuaidi[e.detail.value].code;
			},
			// 退款历史
			refundLog(id) {
				this.$wanlshop.to(`/pages/mines/refund/log/log?id=${id}`);
			},
			// 平台介入
			async arbitrationRefund(id) {
				this.$api.get({
					url: '/wanlshop/refund/arbitrationRefund',
					data: {
						id: id
					},
					success: res => {
						this.loadData({
							id: id
						});
					}
				});
			},
			// 关闭退款
			async closeRefund(id) {
				this.$api.get({
					url: '/wanlshop/refund/closeRefund',
					data: {
						id: id
					},
					success: res => {
						this.$store.commit('statistics/order', {
							customer: this.$store.state.statistics.order.customer - 1
						});
						this.loadData({
							id: id
						});
					}
				});
			},
			// 提交物流
			async toExpress() {
				if (!this.returnData.express_no) {
					this.$wanlshop.msg('运单号不能为空');
					return false;
				}
				if (!this.returnData.express_name) {
					this.$wanlshop.msg('请选择快递公司');
					return false;
				}
				this.$api.post({
					url: '/wanlshop/refund/toExpress',
					data: this.returnData,
					success: res => {
						this.loadData({
							id: res
						});
					}
				});
			},
			// 修改退款
			editRefund(id) {
				this.$wanlshop.to(`/pages/mines/refund/edit/edit?id=${id}`);
			}

		},
		onLoad(option) {
			this.loadData({
				id: option.id
			});
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F0F0;
	}

	.details {
		.wanl-refund {
			.header {
				// background-color: pink;
				height: 180rpx;
				position: relative;

				.img-bg {
					width: 100%;
					height: 180rpx;
				}

				.content {
					height: 180rpx;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					// bottom: 0;
					// background-color: red;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 50rpx;

					view {

						// background-color: #007AFF;
						.status-text {
							font-size: 34rpx;
							line-height: 34rpx;
							color: #FEFEFE;
							margin-bottom: 5rpx;
							// font-weight: bold;

						}

						.reason {
							font-size: 24rpx;
							color: rgba(254, 254, 254, 0.75);
						}
					}

					.status-img {
						width: 100rpx;
						height: 100rpx;
						// background-color: #1CBBB4;
					}
				}
			}

			.bg-white {
				background-color: #FFFFFF;
				color: #222222;
				padding: 25rpx;
				font-size: 28rpx;
			}

			.addressee {
				// 
				

				.addressee_item {
					border-top: 1rpx solid #F1F1F1;
					background-color: #FFFFFF;
					color: #222222;
					padding: 25rpx ;
					font-size: 28rpx;

					.content {
						.justify-between {
							justify-content: space-between;
							display: flex;
						}

						.margin-top-xs {
							margin-top: 10rpx;

							.text-cut-2 {
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}
						}
					}
				}

				.bg-white {
					border-top: 1rpx solid #F1F1F1;
					background-color: #FFFFFF;
					color: #222222;
					padding: 25rpx;

					.wanl-gray {
						color: #828282;
						font-size: 26rpx;

						view {
							display: flex;
							align-items: center;

							.iconfont {
								font-size: 50rpx;
								color: #828282;
							}
						}

					}

				}
			    .cu-form-group{
					display: flex;
					align-items: center;
					padding: 25rpx;
					background-color: #FFFFFF;
					
					.title{
						padding-right: 25rpx;
						font-size: 28rpx;
						height: 55rpx;
						line-height: 55rpx;
					}
					.input{
						// background-color: #007AFF;
						font-size: 28rpx;
						color: #555;
						padding-right: 10rpx;
						width: 500rpx;
					}
					
				}
				.margin-top-bj{
					margin-top: 25rpx;
				}
				.cu-form-group1{
					justify-content: space-between;
					border-top: 1rpx solid #F1F1F1;
					.picker{
						display: flex;
						align-items: center;
						// line-height: 76rpx;
						font-size: 28rpx;
						.iconfont{
							color: #808080;
							font-size: 40rpx;
						}
					}
				}
				.current1{
					// height: 50rpx;
					// line-height: 50rpx;
					// background-color: #007AFF;
					border: none;
					.justify-end1{
						// background-color: #39B54A;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.cu-btn1{
							height: 60rpx;
							width: 140rpx;
							font-size: 26rpx;
							padding: 0 12rpx;
							border-radius: 8rpx;
							line-height: 60rpx;
							text-align: center;
							color: #fe6600;
							border: 1rpx solid #fe6600;
						}
					}
				}
			}
			.wuliu{
				// background-color: pink;
			}

			.current {
				border-top: 1rpx solid #F1F1F1;

				.wanl-gray {
					color: #828282;
					font-size: 26rpx;

					view {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 50rpx;
							color: #828282;
						}
					}

				}

				.justify-end {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					// background-color: pink;
					margin-top: 25rpx;

					.cu-btn {
						height: 60rpx;
						width: 140rpx;
						font-size: 26rpx;
						padding: 0 12rpx;
						border-radius: 8rpx;
						line-height: 60rpx;
						text-align: center;
					}

					.line-black {
						color: #333333;
						margin-left: 10rpx;
						margin-right: 10rpx;
						border: 1rpx solid #999999;

					}

					.line-orange {
						color: #fe6600;
						border: 1rpx solid #fe6600;
					}


				}
			}
            .price{
				background-color:#FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				
				.text-price::before{
					content: "¥";
					font-size: 80%;
					margin-right: 4rpx;
					
				}
				.wanl-orange{
					color: #fe6600;
					font-size: 30rpx;
				}
			}
			.tuikuan {
				margin-top: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #222222;

				.iconfont {
					font-size: 35rpx;
					color: #828282;
				}
			}

			.padding-bj {
				padding: 25rpx;
				background-color: #FFFFFF;
				display: flex;
				// align-items: center;

				.cu-avatar {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text-sm {
					font-size: 28rpx;

					.margin-bottom-xs {
						margin-bottom: 10rpx;

						.text-cut-2 {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
					}

					.wanl-gray {
						color: #828282;
					}
				}
			}

			.leixing {
				margin-top: 25rpx;
				font-size: 26rpx;

				.item {
					.wanl-gray {
						color: #828282;
					}
				}

				.margin-top-bj {
					margin-top: 25rpx;
				}
			}
		}
	}
</style>
